<!-- the container -->
<div id="app"></div>

<!-- Regular template container(optional) -->
<!-- if you need this component used in other component, you can specify name in the tag-->
<script id="helloword" type="text/regular" name="helloword">
  Hello 
  {{#if user}}
    <strong> &cent; {{user}}</strong>, <a href='#' on-click={{user = null}}>logout</a>
  {{#else}}
    Friend, please <a href='#' on-click={{this.login()}}>login</a>
  {{/if}}
</script>
<!-- include regular.js -->
<script src="../dist/regular.js"></script>


<!-- Define your Own Component -->
<script>
var LoginApp = Regular.extend({
  // name: 'helloword',  if this component need used in other component , you need specify name
  // you can pass [String| preparsed AST | node selector]
  template: '#helloword', //if es6 released,  multi-line string is 
  login: function(){
    // all data is store in the plain object `this.data`;
    var data = this.data;
    // just like angular, if trigger by the ui , the $digest phase will automate triggerd;
    data.user = prompt("Please Enter you name", "");
  }
});

var application = new LoginApp().inject('#app');
// you can also inject the component at other position, for example `inject('#app', 'bottom' | 'top' | 'after' | 'before')`, the default is 'bottom'

</script>

